<script setup>
import {Edit, Delete} from '@element-plus/icons-vue'
import {onMounted, reactive, ref} from 'vue'
import {riskDelService, riskUpdateService, searchRisk} from "@/api/risk";
import {ElMessage} from 'element-plus'
import {riskAddService} from "@/api/risk";


//风险点名称选择
const secondrisks = ref({
  sriskid:'',
  firstname:'',
  secondname:'',
  score:''
})
const measurelist=([])
const searchRiskList = async () => {
  let result = await searchRisk();
  secondrisks.value=result.data
}
searchRiskList()

//查询
const searchClick=((res)=>{
  Page();
});
//帮扶措施数据模型
const secondrisk = ref([])
const Page = async () => {
  searchRisk(form).then((res) => {
    console.log(form)
    secondrisk.value = res.data;
    // total.value = res.data.total;
  });
}
const form = reactive({
  sriskid:'',
  firstname:'',
  secondname:'',
  score:''
})
onMounted(() => {
  Page();
});


//重置
const rest=((res)=>{
  form.sriskid='';
  form.firstname='';
  form.secondname='';
  Page();
});


//分页条数据模型
const pageNum = ref(1)//当前页
const total = ref(100)//总条数
const pageSize = ref(3)//每页条数
//当每页条数发生了变化，调用此函数
const onSizeChange = (size) => {
  pageSize.value = size
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  pageNum.value = num
}


//控制编辑对话框
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
//打开编辑对话框
const form1 = ref([])
const tableData1 = ref([])
const update=(index,row)=>{
  dialogFormVisible.value=true;
  tableData1.value =index
  form1.value =JSON.parse(JSON.stringify(row))
};
//确认编辑
const updateRisk = async (clickState)=>{
  //调用接口
  let result = await riskUpdateService(form1.value);
  ElMessage.success(result.msg? result.msg:'编辑成功');
  //让对话框消失
  dialogFormVisible.value = false
}
const riskData = ref({
  sriskid:'',
  firstname:'',
  secondname:'',
  score:''
})
const tableData2 = ref([])
//点击删除
const del=async (index,row)=>{
  tableData1.value =index
  tableData2.value = []
  tableData2.value =JSON.parse(JSON.stringify(row))
  riskData.value=tableData2.value;
  console.log("tableData2.value");
  console.log(riskData.value);
  console.log("tableData2.value");
};

const delRisk = async ()=>{
  let result = await riskDelService(riskData.value);
  ElMessage.success(result.msg? result.msg:'删除成功');
}
//删除所选帮扶措施
// const delRisk = async (clickState)=>{
//   //调用接口
//   // let result = await riskDelService(tableData2.value);
//   // ElMessage.success(result.msg? result.msg:'删除成功');
// }


import '@vueup/vue-quill/dist/vue-quill.snow.css'
//控制抽屉是否显示
const visibleDrawer = ref(false)
//添加表单数据模型
const riskModel = ref({
  sriskid:'',
  firstname:'',
  secondname:'',
  score:''
})
//添加帮扶措施
const addRisk = async (clickState)=>{
  //调用接口
  let result = await riskAddService(riskModel.value);
  ElMessage.success(result.msg? result.msg:'添加成功');
  //让抽屉消失
  visibleDrawer.value = false;
}
const no = async (clickState)=>{
  //让抽屉消失
  visibleDrawer.value = false;
}
</script>


<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>风险点管理</span>
        <div class="extra">
          <el-button type="primary" @click="visibleDrawer = true">添加风险点</el-button>
        </div>
      </div>
    </template>
    <!-- 搜索表单 -->
    <!--    <el-form :model="form" inline>-->
    <!--      <el-form-item label="风险点名称：">-->
    <!--        <el-select placeholder="请选择" v-model="form.secondname">-->
    <!--          <el-option v-for="s in secondrisks" :key="s.sriskid" :label="s.secondname" :value="s.secondname">-->
    <!--          </el-option>-->
    <!--        </el-select>-->
    <!--      </el-form-item>-->
    <!--      <el-form-item>-->
    <!--        <el-button type="primary" @click="searchClick">查询</el-button>-->
    <!--        <el-button @click="rest">重置</el-button>-->
    <!--      </el-form-item>-->
    <!--    </el-form>-->
    <!-- 风险点列表 -->
    <el-table :data="secondrisk" style="width: 100%">
      <el-table-column label="编号" prop="sriskid"></el-table-column>
      <el-table-column label="一级风险点名称" prop="firstname"></el-table-column>
      <el-table-column label="二级风险点名称" prop="secondname"></el-table-column>
      <el-table-column label="贫困系数" prop="score"></el-table-column>
      <el-table-column label="操作" width="100">
        <template #default="scope">
          <el-popconfirm title="确认删除?" @confirm="delRisk">
            <template #reference>
              <el-button :icon="Delete" circle plain type="danger" @click="del(scope.$index,scope.row)"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据" />
      </template>
    </el-table>
    <!-- 分页条 -->
    <!--    <el-pagination v-model:current-page="pageNum" v-model:page-size="pageSize" :page-sizes="[3, 5, 10, 15]"-->
    <!--                   layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="onSizeChange"-->
    <!--                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end" />-->
    <!-- 抽屉 -->
    <el-drawer v-model="visibleDrawer" title="添加风险点" direction="rtl" size="28%">
      <el-form :model="riskModel" label-width="120px">
        <el-form-item label="风险点编号">
          <el-input v-model="riskModel.sriskid" placeholder="请输入风险点编号"></el-input>
        </el-form-item>
        <el-form-item label="一级风险点名称">
          <el-select v-model="riskModel.firstname" placeholder="请输入一级风险点名称">
            <el-option label="医保情况" value="医保情况" />
            <el-option label="水利情况" value="水利情况" />
            <el-option label="紧急灾难" value="紧急灾难" />
            <el-option label="健康情况" value="健康情况" />
            <el-option label="教育情况" value="教育情况" />
            <el-option label="住房情况" value="住房情况" />
          </el-select>
        </el-form-item>
        <el-form-item label="二级风险点名称">
          <el-input v-model="riskModel.secondname" placeholder="请输入二级风险点名称"></el-input>
        </el-form-item>
        <el-form-item label="贫困系数">
          <el-input v-model="riskModel.score" placeholder="请输入贫困系数"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addRisk('提交')">提交</el-button>
          <el-button type="info" @click="no('取消')">取消</el-button>
        </el-form-item>
      </el-form>
    </el-drawer>
  </el-card>
</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
/* 抽屉样式 */
.editor {
  width: 100%;
  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>